
<template>
  <div class="asset-inventory-report">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>盘点报表</span>
          <div class="header-actions">
            <el-button type="primary" @click="handleExport">导出Excel</el-button>
            <el-button @click="handlePrint">打印报表</el-button>
            <el-button @click="handleBack">返回</el-button>
          </div>
        </div>
      </template>

      <!-- 任务信息 -->
      <el-descriptions title="任务信息" :column="3" border class="task-info">
        <el-descriptions-item label="任务编号">{{ reportInfo.taskNo }}</el-descriptions-item>
        <el-descriptions-item label="任务类型">{{ getTaskTypeLabel(reportInfo.taskType) }}</el-descriptions-item>
        <el-descriptions-item label="执行部门">{{ reportInfo.department }}</el-descriptions-item>
        <el-descriptions-item label="执行人">{{ reportInfo.executor }}</el-descriptions-item>
        <el-descriptions-item label="盘点日期">{{ reportInfo.inventoryDate }}</el-descriptions-item>
        <el-descriptions-item label="完成时间">{{ reportInfo.completeTime }}</el-descriptions-item>
      </el-descriptions>

      <!-- 盘点统计 -->
      <div class="inventory-statistics">
        <h3>盘点统计</h3>
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="stat-card">
              <div class="stat-icon" style="background-color: #409EFF">
                <el-icon size="24"><Box /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-title">应盘资产</div>
                <div class="stat-value">{{ reportInfo.totalCount }}</div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-card">
              <div class="stat-icon" style="background-color: #67C23A">
                <el-icon size="24"><Select /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-title">已盘资产</div>
                <div class="stat-value">{{ reportInfo.completedCount }}</div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-card">
              <div class="stat-icon" style="background-color: #E6A23C">
                <el-icon size="24"><Warning /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-title">异常资产</div>
                <div class="stat-value">{{ reportInfo.exceptionCount }}</div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-card">
              <div class="stat-icon" style="background-color: #F56C6C">
                <el-icon size="24"><Close /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-title">盘亏资产</div>
                <div class="stat-value">{{ reportInfo.lossCount }}</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 盘点明细 -->
      <div class="inventory-details">
        <div class="details-header">
          <h3>盘点明细</h3>
          <div class="filter-actions">
            <el-select v-model="statusFilter" placeholder="筛选状态" clearable style="width: 150px">
              <el-option label="全部" value="" />
              <el-option label="正常" value="normal" />
              <el-option label="异常" value="exception" />
              <el-option label="盘亏" value="loss" />
            </el-select>
          </div>
        </div>

        <el-table :data="filteredAssetList" border style="width: 100%">
          <el-table-column type="index" label="序号" width="60" />
          <el-table-column prop="code" label="资产编码" width="120" />
          <el-table-column prop="name" label="资产名称" width="180" />
          <el-table-column prop="category" label="资产分类" width="120">
            <template #default="scope">
              <el-tag :type="getCategoryType(scope.row.category)">
                {{ getCategoryLabel(scope.row.category) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="model" label="规格型号" width="150" />
          <el-table-column prop="location" label="存放位置" width="150" />
          <el-table-column prop="user" label="使用人" width="120" />
          <el-table-column prop="status" label="资产状态" width="100">
            <template #default="scope">
              <el-tag :type="getStatusType(scope.row.status)">
                {{ getStatusLabel(scope.row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="inventoryStatus" label="盘点状态" width="100">
            <template #default="scope">
              <el-tag :type="getInventoryStatusType(scope.row.inventoryStatus)">
                {{ getInventoryStatusLabel(scope.row.inventoryStatus) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="inventoryTime" label="盘点时间" width="150" />
          <el-table-column prop="inventoryUser" label="盘点人" width="120" />
          <el-table-column prop="remark" label="备注" min-width="150" />
          <el-table-column label="操作" width="120" fixed="right">
            <template #default="scope">
              <el-button link type="primary" @click="handleViewAsset(scope.row)">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页区域 -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="pagination.currentPage"
            v-model:page-size="pagination.pageSize"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Box, Select, Warning, Close } from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()

// 报表信息
const reportInfo = reactive({
  id: 1,
  taskNo: 'PD20230001',
  taskType: 'department',
  department: '技术部',
  executor: '张三',
  inventoryDate: '2023-12-10',
  completeTime: '2023-12-10 16:30:00',
  totalCount: 25,
  completedCount: 23,
  exceptionCount: 1,
  lossCount: 1
})

// 资产列表
const assetList = ref([
  {
    id: 1,
    code: 'ZC20230001',
    name: '笔记本电脑',
    category: 'fixed',
    model: 'ThinkPad X1 Carbon',
    location: '总部A座501',
    user: '张三',
    status: 'in_use',
    inventoryStatus: 'normal',
    inventoryTime: '2023-12-10 09:15:00',
    inventoryUser: '张三',
    remark: ''
  },
  {
    id: 2,
    code: 'ZC20230002',
    name: '办公桌',
    category: 'low_value',
    model: '标准办公桌',
    location: '总部A座502',
    user: '李四',
    status: 'in_use',
    inventoryStatus: 'exception',
    inventoryTime: '2023-12-10 10:30:00',
    inventoryUser: '张三',
    remark: '办公桌有轻微划痕'
  },
  {
    id: 3,
    code: 'ZC20230003',
    name: '打印机',
    category: 'fixed',
    model: 'HP LaserJet Pro',
    location: '总部A座503',
    user: '王五',
    status: 'in_use',
    inventoryStatus: 'loss',
    inventoryTime: '2023-12-10 14:20:00',
    inventoryUser: '张三',
    remark: '未找到该资产'
  }
])

// 状态筛选
const statusFilter = ref('')

// 分页数据
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 25
})

// 筛选后的资产列表
const filteredAssetList = computed(() => {
  if (!statusFilter.value) {
    return assetList.value
  }
  return assetList.value.filter(item => item.inventoryStatus === statusFilter.value)
})

// 获取任务类型标签
const getTaskTypeLabel = (taskType) => {
  const typeMap = {
    department: '部门盘点',
    check: '检查盘点'
  }
  return typeMap[taskType] || taskType
}

// 获取资产分类标签
const getCategoryLabel = (category) => {
  const categoryMap = {
    fixed: '固定资产',
    low_value: '低值易耗品',
    lease: '租赁资产',
    lease_improvement: '租入固定资产改良'
  }
  return categoryMap[category] || category
}

// 获取资产分类类型
const getCategoryType = (category) => {
  const typeMap = {
    fixed: '',
    low_value: 'success',
    lease: 'warning',
    lease_improvement: 'info'
  }
  return typeMap[category] || ''
}

// 获取状态标签
const getStatusLabel = (status) => {
  const statusMap = {
    in_use: '在用',
    idle: '闲置',
    maintenance: '维修中',
    scrapped: '已报废'
  }
  return statusMap[status] || status
}

// 获取状态类型
const getStatusType = (status) => {
  const typeMap = {
    in_use: 'success',
    idle: 'info',
    maintenance: 'warning',
    scrapped: 'danger'
  }
  return typeMap[status] || ''
}

// 获取盘点状态标签
const getInventoryStatusLabel = (status) => {
  const statusMap = {
    normal: '正常',
    exception: '异常',
    loss: '盘亏'
  }
  return statusMap[status] || status
}

// 获取盘点状态类型
const getInventoryStatusType = (status) => {
  const typeMap = {
    normal: 'success',
    exception: 'warning',
    loss: 'danger'
  }
  return typeMap[status] || ''
}

// 返回列表
const handleBack = () => {
  router.push('/asset-inventory')
}

// 导出Excel
const handleExport = () => {
  ElMessage.success('正在导出Excel文件...')
  // 实际应该调用导出API
}

// 打印报表
const handlePrint = () => {
  ElMessage.success('正在准备打印...')
  // 实际应该调用打印功能
  window.print()
}

// 查看资产详情
const handleViewAsset = (row) => {
  router.push(`/assets/detail/${row.id}`)
}

// 分页大小改变
const handleSizeChange = (size) => {
  pagination.pageSize = size
  // 实际应该重新加载数据
}

// 当前页改变
const handleCurrentChange = (page) => {
  pagination.currentPage = page
  // 实际应该重新加载数据
}
</script>

<style scoped>
.asset-inventory-report {
  padding: 0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.task-info {
  margin-bottom: 20px;
}

.inventory-statistics {
  margin-bottom: 20px;
}

.stat-card {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 4px;
  padding: 15px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  color: white;
}

.stat-info {
  flex: 1;
}

.stat-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
}

.inventory-details {
  margin-top: 20px;
}

.details-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

@media print {
  .header-actions,
  .filter-actions,
  .pagination-container {
    display: none;
  }
}
</style>
